import { NavMenuSection } from '@entities/NavMenu'
import { ProjectsMenuList } from '@entities/Projects'
import { Task, TasksMenuList } from '@entities/Tasks'
import { EditTaskForm } from '@features/EditTaskForm'
import { ThemeSwitcher } from '@features/ThemeSwitcher'
import { useAppDispatch } from '@shared/lib/hooks/redux'
import { useResize } from '@shared/lib/hooks/useResize'
import { UiActions } from '@shared/lib/store/UiSlice'
import { Button } from '@shared/ui/Button'
import { IconButton } from '@shared/ui/IconButton'
import { Title } from '@shared/ui/Title'
import classNames from 'classnames'
import { motion } from 'framer-motion'
import { useNavigate } from 'react-router-dom'
import styles from './Sidebar.module.scss'

export const Sidebar = () => {
  const dispatch = useAppDispatch()
  const navigate = useNavigate()
  const addTask = (task?: Task) => {
    navigate('/tasks')
    dispatch(UiActions.openPopup(<EditTaskForm task={task} />))
  }
  const renderAddButton = () => {
    return (
      <IconButton
        form='rounded'
        iconName='icon-plus'
        onClick={() => addTask()}
        size='small'
        style='text'
      />
    )
  }
  const { isScreenMd } = useResize()

  return (
    <motion.aside
      animate={{ x: 0 }}
      className={styles.sidebar}
      initial={{ x: '-50px' }}
      transition={{ duration: 0.5, ease: 'easeOut' }}
    >
      <div className={classNames(styles.wrapper, !isScreenMd && styles.collapsed)}>
        {isScreenMd ? (
          <Title className={styles.logo} tag='h2'>
            Chill ToDo
          </Title>
        ) : (
          <>
            <div className={styles['logo-small']}></div>
          </>
        )}
        <NavMenuSection />
        <ProjectsMenuList />
        <TasksMenuList onClick={addTask} renderButton={renderAddButton} />
      </div>
      <div className={styles['switcher-box']}>
        {!isScreenMd && (
          <div>
            <Button
              circle
              className={styles.arrow}
              color='primary'
              iconName='arrow_forward'
              size='small'
            />
          </div>
        )}
        <ThemeSwitcher />
      </div>
    </motion.aside>
  )
}

Sidebar.displayName = 'Sidebar'
